<template>
  <section id="game" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
      <!-- 标题区 -->
      <div class="flex flex-col items-center justify-center text-center mb-12 w-full">
        <h2 class="mx-auto" style="font-size: 30px; font-weight: bold;">学习游戏</h2>
        <p class="mx-auto" style="font-size: 16px; color: #666;">通过趣味游戏提升学习兴趣和效率，边玩边学，轻松掌握知识！</p>
      </div>
      <!-- 游戏卡片区 -->
      <a-row :gutter="32">
        <a-col :xs="24" :md="8">
          <a-card hoverable class="game-card">
            <div class="game-card-icon bg-blue-100 text-blue-500">
              <i class="fa fa-question-circle"></i>
            </div>
            <div class="game-card-title">答题闯关</div>
            <div class="game-card-desc">通过答题闯关模式，巩固所学知识，挑战自我，赢取积分奖励。</div>
            <a-button type="primary" class="game-card-btn mt-4" @click="startQuizGame">开始闯关</a-button>
          </a-card>
        </a-col>
        <a-col :xs="24" :md="8">
          <a-card hoverable class="game-card">
            <div class="game-card-icon bg-green-100 text-green-500">
              <i class="fa fa-puzzle-piece"></i>
            </div>
            <div class="game-card-title">知识拼图</div>
            <div class="game-card-desc">将知识点拼成完整图谱，锻炼逻辑思维，提升综合理解能力。</div>
            <a-button type="primary" class="game-card-btn mt-4" @click="startPuzzleGame">开始拼图</a-button>
          </a-card>
        </a-col>
        <a-col :xs="24" :md="8">
          <a-card hoverable class="game-card">
            <div class="game-card-icon bg-orange-100 text-orange-500">
              <i class="fa fa-lightbulb-o"></i>
            </div>
            <div class="game-card-title">单词记忆</div>
            <div class="game-card-desc">通过趣味记忆小游戏，快速掌握专业词汇和重点短语。</div>
            <a-button type="primary" class="game-card-btn mt-4" @click="startMemoryGame">开始记忆</a-button>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </section>
</template>
<script setup>
import { Row, Col, Card, Button, message } from 'ant-design-vue';
import { ref, onMounted } from 'vue';

// 用户信息相关 - 直接在组件中实现
const userInfo = ref(null);

// 检查用户登录状态
const checkUserLogin = () => {
  try {
    const storedUserInfo = localStorage.getItem('userInfo')
    if (storedUserInfo) {
      const userInfo = JSON.parse(storedUserInfo)
      console.log('GameSection - 当前登录用户信息:', userInfo)
      return userInfo
    } else {
      console.log('GameSection - 用户未登录')
      return null
    }
  } catch (error) {
    console.error('检查用户登录状态失败:', error)
    return null
  }
}

// 获取当前用户ID - 等效于 StpUtil.getLoginIdAsInt()
const getLoginIdAsInt = () => {
  const userInfo = checkUserLogin()
  if (userInfo && userInfo.userId) {
    return parseInt(userInfo.userId)
  }
  return null
}

// 获取当前用户ID
const getCurrentUserId = () => {
  const userInfo = checkUserLogin()
  if (userInfo && userInfo.userId) {
    return userInfo.userId
  }
  return null
}

// 游戏相关方法
const startQuizGame = () => {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再开始游戏');
    return;
  }
  
  console.log(`用户ID ${userId} 开始答题闯关游戏`);
  message.success('游戏加载中，请稍候...');
  // 这里可以添加跳转到游戏页面的逻辑
};

const startPuzzleGame = () => {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再开始游戏');
    return;
  }
  
  console.log(`用户ID ${userId} 开始知识拼图游戏`);
  message.success('游戏加载中，请稍候...');
  // 这里可以添加跳转到游戏页面的逻辑
};

const startMemoryGame = () => {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再开始游戏');
    return;
  }
  
  console.log(`用户ID ${userId} 开始单词记忆游戏`);
  message.success('游戏加载中，请稍候...');
  // 这里可以添加跳转到游戏页面的逻辑
};

// 组件挂载时检查用户登录状态
onMounted(() => {
  userInfo.value = checkUserLogin();
});
</script>
<style scoped>
.game-card {
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(22,93,255,0.08), 0 1.5px 4px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.3s, transform 0.3s;
  background: #fff;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 40px 24px 32px 24px;
}
.game-card:hover {
  box-shadow: 0 16px 40px rgba(22,93,255,0.12), 0 3px 8px rgba(0,0,0,0.08) !important;
  transform: translateY(-6px) scale(1.02);
}
.game-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 18px auto;
}
.game-card-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}
.game-card-desc {
  font-size: 15px;
  color: #666;
  margin-bottom: 10px;
}
.game-card-btn {
  border-radius: 999px !important;
  font-size: 16px;
  font-weight: 600;
  padding: 0.5em 2em;
}
.bg-blue-100 { background: #eaf4ff !important; }
.text-blue-500 { color: #165dff !important; }
.bg-green-100 { background: #eafff3 !important; }
.text-green-500 { color: #00b42a !important; }
.bg-orange-100 { background: #fff7ea !important; }
.text-orange-500 { color: #ff7d00 !important; }
</style> 